import React ,{useState,useEffect}  from 'react';

const MouseTracker:React.FC = ()=>{
  const [position,setPosition] = useState({x:0,y:0})
  useEffect(()=>{
    console.log('add effect',position.x);
    const updateMouse=(e:MouseEvent)=>{
       console.log('inner updateMouse ');
       setPosition({x:e.clientX,y:e.clientY})
     }
     document.addEventListener('click',updateMouse)

    return ()=>{
      console.log('remove effect',position.x);

      //清除操作
       document.removeEventListener('click',updateMouse)
    }
  },[])
  console.log('before render',position.x);

  return(
  <p>X:{position.x},Y:{position.y}</p>
  )
}


export default MouseTracker
